<template>
  <view>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
    <HPSearchBar :keywork="searchInputText" holder="搜索职业的名称" @begin="searchBeginAction" @end="searchEndAction"
      @changed="searchChangedAction"></HPSearchBar>
    <HPSearchList v-if="searchBegin && searchResultList.length > 0" :keywork="searchInputText" :list="searchResultList"
      @selectedCell="searchCellItem"></HPSearchList>
    <view class="style-tab">
      <view :class="['style-tab-item', styleLevelQuestionSelect, 'style-tab-level-question-library']"
        @click="clickLevelQuestionLibrary">专职题库</view>
      <view :class="['style-tab-item', styleHistoryYearSelect, 'style-tab-history-year-question']"
        @click="clickHistoryYearQuestion">历年真题</view>
    </view>
    <LevelQuestionLibrary ref="levelQuestionLibrary" v-show="currentIndex == 0" @onLogin="onLogin"></LevelQuestionLibrary>
    <HPTable v-show="currentIndex == 1" ref="myTable" :list="list" :pages="dataPages" :loading="tableLoading"
      @loadMore="loadMoreAction" @refresh="onRefreshAction">
      <view slot="cell" class="allContaienr" @click="clickCell(item)" v-for="(item, index) in list" :key="index">
        <view class="itemName">{{ item.title }}</view>
        <view class="flexArea">
          <u-tag :text="item.positionName" mode="light" color="#8AA7D9" />
          <view class="itemText">共 {{ item.questionNum }} 道题</view>
        </view>
      </view>
    </HPTable>
  </view>
</template>

<script>
import common from "@/api/common.js";
import Empty from "@/components/Empty.vue";
import { getQuestList } from "@/api/modules/company"; 
import { matchPositionListNew } from "@/api/modules/career";
import LoginDialog from "@/components/LoginDialog";
import HPSearchBar from "./HPSearchBar.vue";
import HPSearchList from "./HPSearchList.vue";
import HPTable from "./HPTable.vue"; 
import LevelQuestionLibrary from "./LevelQuestionLibrary.vue"

export default {
  components: {
    Empty,
    LoginDialog,
    HPSearchBar,
    HPSearchList,
    HPTable,
    LevelQuestionLibrary
  },

  data() {
    return {
      personId: "",
      searchInputText: "",
      searchBegin: false,
      searchResultList: [],

      isSearchLoading: false,
      searchPageParams: {
        pageNo: 1,
        pageSize: 30,
      },
      searchMoreLoading: "loadmore",
      searchPositionId: "",

      tableLoading: false,
      list: [],
      dataPages: 1,
      currentIndex: 0,
      styleLevelQuestionSelect: "style-tab-item-selected",
      styleHistoryYearSelect: "style-tab-item-unselected"
    };
  },

  mounted() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.$refs.myTable.onRefresh();
  },

  methods: {
    onLogin(){
      this.showLoginDialog();
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack(){
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.searchEndAction();
    },
    clickLevelQuestionLibrary() {
      console.log("clickLevelQuestionLibrary");
      this.currentIndex = 0;
      this.styleLevelQuestionSelect = "style-tab-item-selected";
      this.styleHistoryYearSelect = "style-tab-item-unselected"
    },
    clickHistoryYearQuestion() {
      console.log("clickHistoryYearQuestion");
      this.currentIndex = 1;
      this.styleLevelQuestionSelect = "style-tab-item-unselected";
      this.styleHistoryYearSelect = "style-tab-item-selected"
    },
    searchBeginAction() {
      this.searchInputText = "";
      this.searchBegin = true;
    },
    searchEndAction() {
      this.searchInputText = "";
      this.searchBegin = false;
      this.searchPositionId = "";
      this.$refs.levelQuestionLibrary.onSearch(this.searchPositionId);
      this.$refs.myTable.onRefresh();
    },
    searchChangedAction(value) {
      this.searchInputText = value;
      this.zhituSearchOn(value);
    },
    zhituSearchOn(key) {
      if (this.isSearchLoading) {
        return;
      }
      this.isSearchLoading = true;

      if (this.searchMoreLoading == "loadmore") {
        this.searchPageParams.pageNo = 1;

        const params = {
          matchName: key,
          pageNo: this.searchPageParams.pageNo,
          pageSize: this.searchPageParams.pageSize,
        };
        matchPositionListNew(params)
          .then((res) => {
            this.list = [];
            if (res.code == 200) {
              this.searchResultList = res.data;

              this.searchPageParams.pages = res.pageparam.pages;
              this.searchPageParams.pageNo++;
            }
            this.isSearchLoading = false;
          })
          .catch((e) => {
            console.log("---报错:" + e);
            this.isSearchLoading = false;
          });
      }
    },
    searchCellItem(item) {
      console.log("searchCellItem", item);
      this.searchInputText = item.positionName;
      this.searchPositionId = item.ylPositionId;
      this.$refs.levelQuestionLibrary.onSearch(this.searchPositionId);
      this.$refs.myTable.onRefresh();
      this.searchResultList = [];
    },

    loadMoreAction(isMore, pageParams) {
      this.getDataList(isMore, pageParams);
    },
    onRefreshAction(pageParams) {
      console.log("onRefreshAction",pageParams);
      this.getDataList(false, pageParams);
    },
    getDataList(isMore, pageParams) {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      console.log("pageParams.pageNo:"+pageParams.pageNo+" dataPages:"+this.dataPages);

      if(!isMore){
        pageParams.pageNo = 1;
      }else{
        if (pageParams.pageNo > this.dataPages) {
          this.tableLoading = false;
          return;
        }
      }
      
      this.tableLoading = true;

      const params = {
        positionId: this.searchPositionId,
        modelType: "zt",
        infoType: "1",
        pageNo: pageParams.pageNo,
        pageSize: pageParams.pageSize,
      };

      getQuestList(params)
        .then((res) => {
          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.dataPages = res.pageparam.pages;
          } else {
            if (this.personId) {
              uni.showToast({
                title: res.status_desc,
                icon: "none",
              });
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    clickCell(item) {
      uni.navigateTo({
        url:
          "/pagesSub/companyCenter/interviewAI/interviewAnswer?positionId=" +
          item.positionId +
          "&id=" +
          item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-cdetail: $img-base + "cdetail/";

.style-tab {
  margin-top: 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;

  .style-tab-item {
    border-style: solid;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    border-width: 2rpx;
    border-radius: 12rpx;
  }

  .style-tab-item-selected {
    border-color: #F75A3E;
    background: linear-gradient(180deg, #FFECE9 0%, #FFFFFF 100%);
  }

  .style-tab-item-unselected {
    border-color: #E4E5F5;
    background: linear-gradient(180deg, #EBF5FE 0%, #FFFFFF 100%);
  }

  .style-tab-level-question-library {
    margin-left: 32rpx;
  }

  .style-tab-history-year-question {
    margin-left: 24rpx;
  }
}

.allContaienr {
  display: flex;
  background: white;
  border-radius: 32rpx;
  padding: 32rpx;
  margin: 32rpx;
  flex-direction: column;

  .flexArea {
    display: flex;
    justify-content: space-between;
  }

  .itemName {
    font-size: 16px;
    color: #222222;
    margin-bottom: 16rpx;
  }

  .itemText {
    margin-top: 10rpx;
    font-size: 12px;
    color: #888888;
  }

  .itemTime {
    margin-top: 12rpx;
    font-size: 12px;
    color: #888888;
  }

  .itemResultNum {
    margin-top: 20rpx;
    font-size: 12px;
    color: #888888;
  }

  .itemContent {
    display: flex;
    flex-direction: column;
  }
}
</style>
